<script setup lang="ts">
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";

import { Star } from "lucide-vue-next";

interface ReviewProps {
  image: string;
  name: string;
  userName: string;
  comment: string;
  rating: number;
}

const reviewList: ReviewProps[] = [
  {
    image: "/pic/1.png",
    name: "大熊",
    userName: "rpa开发者",
    comment:
      "很棒,不用再像以前那样手动的给客户复制应用了.稳定还不出错,元素库也能迁移成功.省了很多事儿",
    rating: 5.0,
  },
  {
    image: "/pic/2.png",
    name: "王**",
    userName: "rpa小白,学习中",
    comment:
      "大佬,我复制了咋看不懂啊 要学什么才能写出这也的流程啊",
    rating: 4.8,
  },

  {
    image: "/pic/4.png",
    name: "水星坚强的胡桃",
    userName: "某闲鱼用户",
    comment:
      "太贵了,2折再送一个月我还能考虑下,你这价格完全没必要. 改价我立马拍",
    rating: 2,
  },
  {
    image: "/pic/3.png",
    name: "烫烫烫是汤圆吖",
    userName: "某工作室",
    comment:
      "我们用rpa来多机器多账户跑任务的,用软件后能方便的部署rpa应用,不需要手动的去处理了",
    rating: 4.7,
  },
  {
    image: "/pic/5.png",
    name: "朝阳",
    userName: "rpa用户",
    comment:
      "官方指令有缺陷,复制后自己编辑下就能完美运行了.👏",
    rating: 5.0,
  },
  {
    image: "/pic/7.png",
    name: "Saudade💫",
    userName: "rpa作者",
    comment:
      "加密功能不错,分发应用时不怕被别人获取到源码了.额外再添加网络验证就很棒",
    rating: 4.6,
  },
];
</script>

<template>
  <section
    id="testimonials"
    class="container py-24 sm:py-32"
  >
    <div class="text-center mb-8">
      <h2 class="text-lg text-primary text-center mb-2 tracking-wider">
        客户反馈
      </h2>

      <h2 class="text-3xl md:text-4xl text-center font-bold mb-4">
        听听ta们怎么说
      </h2>
    </div>

    <Carousel
      :opts="{
        align: 'start',
      }"
      class="relative w-[80%] sm:w-[90%] lg:max-w-screen-xl mx-auto"
    >
      <CarouselContent>
        <CarouselItem
          v-for="review in reviewList"
          :key="review.name"
          class="md:basis-1/2 lg:basis-1/3"
        >
          <Card class="bg-muted/50 dark:bg-card">
            <CardContent class="pt-6 pb-0">
              <div class="flex gap-1 pb-6">
                <Star class="size-4 fill-primary text-primary" />
                <Star  v-if="review.rating > 1 " class="size-4 fill-primary text-primary" />
                <Star v-if="review.rating > 2" class="size-4 fill-primary text-primary" />
                <Star v-if="review.rating > 3" class="size-4 fill-primary text-primary" />
                <Star v-if="review.rating > 4" class="size-4 fill-primary text-primary" />
              </div>

              "{{ review.comment }}"
            </CardContent>

            <CardHeader>
              <div class="flex flex-row items-center gap-4">
                <Avatar>
                  <AvatarImage
                    :src="review.image"
                    alt="@radix-vue"
                  />
                  <AvatarFallback>SV</AvatarFallback>
                </Avatar>

                <div class="flex flex-col">
                  <CardTitle class="text-lg">{{ review.name }}</CardTitle>
                  <CardDescription>{{ review.userName }}</CardDescription>
                </div>
              </div>
            </CardHeader>
          </Card>
        </CarouselItem>
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  </section>
</template>
